import { Flex } from "antd";
import styles from "./XFZuoCard.module.css";
import { useUser } from "@/hook/useUser/useUser";
import ProxyImage from "../Common/ProxyImage/ProxyImage";
export function XFZuoCard({ item = {}, style = {} }) {
  const { openInNewWindow, listDisplay } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  const isImageEnabled = listDisplay === 0 ? true : false;

  return (
    <Flex
      style={{
        backgroundColor: "white",
        boxShadow:
          "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
        borderRadius: "8px",
        overflow: "hidden",
        ...style,
      }}>
      <Flex
        flex={1}
        style={{
          padding: "16px",
          gap: "16px",
          flexDirection: { xs: "column", md: "row" },
        }}>
        {/* 图片部分 */}
        {isImageEnabled && (
          <a
            href={item.url}
            target={target}
            style={{
              flex: { xs: "none", md: "0 0 200px" },
              position: "relative",
              height: { xs: "160px", md: "120px" },
              width: { xs: "100%", md: "200px" },
            }}>
            <>
              <ProxyImage
                originalUrl={item.extra_content?.photo_url || null}
                style={{
                  height: "108.9px",
                  width: "185.9px",
                  objectFit: "cover",
                  borderRadius: "4px",
                }}
                alt="文章配图"
              />

              {item.extra_content?.icon_url && (
                <ProxyImage
                  originalUrl={item.extra_content?.photo_url || null}
                  style={{
                    position: "absolute",
                    bottom: "8px",
                    right: "8px",
                    width: "24px",
                    height: "24px",
                  }}
                  alt="图标"
                />
              )}
            </>
          </a>
        )}

        {/* 内容部分 */}
        <Flex
          vertical
          flex={1}
          style={{
            gap: "8px",
          }}>
          {/* 标题 */}
          <a
            href={item.url}
            target={target}
            className={styles["content-link"]}
            style={{ textDecoration: "none" }}>
            <h3
              className={styles.title}
              key={item.url}
              style={{
                display: "-webkit-box",
                WebkitLineClamp: 2,
                WebkitBoxOrient: "vertical",
                overflow: "hidden",
              }}>
              {item.title}
            </h3>

            {/* 移动端简介 */}
            <p
              style={{
                fontSize: "14px",
                color: "#666",
                lineHeight: 1.5,
                display: { xs: "block", md: "none" },
                WebkitLineClamp: 2,
                WebkitBoxOrient: "vertical",
                overflow: "hidden",
              }}>
              {item.extra_content.intro}
            </p>
          </a>

          {/* 底部信息 */}
          <Flex
            justify="space-between"
            align="flex-end"
            style={{
              marginTop: "auto",
            }}>
            {/* 关键词 */}
            <Flex
              wrap="wrap"
              gap="8px"
              style={{
                flex: 1,
                overflow: "hidden",
              }}>
              {item?.extra_content?.keywords?.map((kwd, i) => (
                <a
                  key={kwd + i}
                  href={kwd?.url}
                  target={target}
                  rel="noopener noreferrer"
                  style={{
                    display: "inline-block",
                    padding: "2px 8px",
                    backgroundColor: "#f5f5f5",
                    borderRadius: "4px",
                    fontSize: "12px",
                    color: "#666",
                    textDecoration: "none",
                    whiteSpace: "nowrap",
                  }}>
                  {kwd.name}
                </a>
              ))}
            </Flex>

            {/* 作者和时间 */}
            <Flex
              gap="12px"
              align="center"
              style={{
                flexShrink: 0,
                marginLeft: "12px",
              }}>
              <Flex gap="8px">
                {item?.extra_content?.authors?.map((aut, i) => (
                  <a
                    key={aut + i}
                    href={aut?.url}
                    target={target}
                    rel="noopener noreferrer"
                    style={{
                      fontSize: "12px",
                      color: "#999",
                      textDecoration: "none",
                    }}>
                    {aut.name}
                  </a>
                ))}
              </Flex>

              <span
                style={{
                  fontSize: "12px",
                  color: "#999",
                }}>
                {item.extra_content.created_at}
              </span>
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}
